<!-- 项目审批 -->
<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">入库照片</block></cu-custom>
		<form @submit="onSubmit">
			
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/9
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index].pictureURL">
					 <image :src="imgList[index].pictureURL" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
		<!-- 	<view>
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg" :disabled="loading" type="">
					<text :class="loading ? 'cuIcon-loading2 cuIconfont-spin' : ''"></text>保存
					</button>
			</view> -->
		</form>
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniCombox from '@/components/uni-combox/uni-combox.vue'
	import globalConfig from '@/config'
	
	import {
		mapGetters
	} from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		components: {
			uniTag,
			uniIcons,
			uniCombox
		},
		computed: mapGetters(['user']),
		data() {
			return {
				item: { },
				goodsInBillId:0,
				loading: false,
				imgList: []
			}
		},
		onLoad(options) {
			this.goodsInBillId = options.goodsInBillId		
			if (this.goodsInBillId > 0) {
				this.$minApi.goodsInBill(this.goodsInBillId).then(res => {
					const data = res
					if (data) {
						console.log(data)
						this.imgList = data.businessBillPictures
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
				})
			}
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			ChooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						
						if (res.tempFilePaths) {
							res.tempFilePaths.forEach(a => {
								  // 上传图片
								 								
								const descript = '入库单图片'
								const type = 0
								const mimeType = 'image/jpeg'
								const parms = `/api/v1/fileServer/binaryObjects:useFile?descript=${descript}&type=${type}&mimeType=${mimeType}`
								const url = globalConfig.fileAddr + parms
								uni.uploadFile({
								    url: url,  
								    filePath: a,  
								    name: 'file',  
								    formData: {  
		
								    },  
								    success: (res) => {
										const data = JSON.parse(res.data)
										const newPhoto = {
											id: 0,
											pictureURL: data.url
										}
										this.imgList.push(newPhoto)
								    },  
								    fail: (err) => {  
										console.log('fail')
								        console.log(err)
								    }
								})
							})
						}
						
						
						
					}
				});
			},
			ViewImage(e) {
				const urls = this.imgList.map(a=>a.pictureURL)
				uni.previewImage({
					urls: urls,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			onSubmit(e) {  
				
				this.loading = true
				const _this = this
				if (this.goodsInBillId > 0) {

					const photos = this.imgList.map(a=>a.pictureURL)
					const data = JSON.stringify(photos)
					_this.$minApi.goodsInBillUploadPhoto(this.goodsInBillId, data).then(res => {
						uni.showToast({
						    title: '保存成功',
						    duration: 2000
						})
						
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)

					}).catch(err => {
						uni.showToast({
							icon: 'none',
						    title: '保存失败',
						    duration: 2000
						})
						console.log(err)
					}).finally(() => {
						this.loading = false
					})
				}
				
			},
			backedPage() {
				uni.redirectTo({
					url: `/pages/goodsInBill/list`
				})
			}
		}
	}
</script>

<style>

</style>
